<template>
  <!-- 更多组件 -->
  <div class="more">
    <!-- 更多列表 -->
    <div class="moreList">
      <!-- 列表项 -->
      <div class="moreItem" @click="goUpVip">会员中心</div>
      <div class="moreItem" @click="goNoteLibrary">优质笔记</div>
      <div class="moreItem" @click="goHighlights">版本亮点</div>
      <div class="moreItem" @click="goHelp">帮助中心</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "More",
  data() {
    return {};
  },
  methods: {
    goUpVip() {
      if (window.location.hash != "#/upvip") {
        this.$router.push("/upvip");
      } else {
        this.$router.go(0);
      }
    },
    goNoteLibrary() {
      if (window.location.hash != "#/notelibrary") {
        this.$router.push("/notelibrary");
      } else {
        this.$router.go(0);
      }
    },
    goHighlights() {
      if (window.location.hash != "#/highlights") {
        this.$router.push("/highlights");
      } else {
        this.$router.go(0);
      }
    },
    goHelp() {
      if (window.location.hash != "#/help") {
        this.$router.push("/help");
      } else {
        this.$router.go(0);
      }
    },
  },
};
</script>

<style lang="less" scoped>
// 更多
.more {
  // 固定定位
  position: fixed;
  // 宽高
  width: 100%;
  height: 180px;
  // 距顶部
  top: 60px;
  // 层级
  z-index: 1000;
  // 弹性盒
  display: flex;
  // 子元素水平垂直居中
  align-items: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  // 背景颜色
  background-color: white;
  // 阴影
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.171);
  // 更多列表
  .moreList {
    // 宽度
    width: 80%;
    // 高度
    height: 167px;
    // 弹性盒
    display: flex;
    flex-direction: column;
    // 子元素水平居中
    align-items: center;
    -webkit-box-align: center;
    // 绝对定位
    position: absolute;
    // 列表项
    .moreItem {
      // 宽度
      width: 100%;
      // 字体大小
      font-size: 16px;
      // 底部边框
      border-bottom: 1px solid #c6c6c6;
      // 字体居中
      text-align: center;
      // 内边距
      padding: 10px;
      // 小手
      cursor: pointer;
      // 字体颜色
      color: #3c3c3c;
    }
  }
}
</style>